<template>
  <div class="developer-help">
    <div style="width: 70%; padding: 20px;">
      <ColoredCard title=" 开发者帮助" description="你需要有一定的编程知识以使用SDK" icon="el-icon-info" cardColor="#FFC1B4" />
    </div>

    <el-tabs v-model="activeTab">
      <!-- 帮助分类 -->
      <el-tab-pane label="主页" name="category">
        <el-main>
          <el-card id="encryption" class="card-item">
            <template #header>
              <div class="card-header">
                <h1>认识激活以及激活过程</h1>
              </div>
            </template>
            <div v-if="loading" class="loading-text">加载中...</div>
            <MarkdownWithHighlight v-else :source="encryptionContent" />
          </el-card>
        </el-main>
      </el-tab-pane>
      <!-- 附件下载 -->
      <el-tab-pane label="接入C++程序" name="cpp">
        <el-main>
          <el-card id="encryption" class="card-item">
            <template #header>
              <div class="card-header">
                <h1>C++ SDK 教程</h1>
              </div>
            </template>
            <div v-if="loading" class="loading-text">加载中...</div>
            <MarkdownWithHighlight v-else :source="cppContent" />
          </el-card>
        </el-main>
      </el-tab-pane>

      <el-tab-pane label="简单例子演示" name="demo">
        <el-main>
          <el-card id="demo_" class="card-item">
            <template #header>
              <div class="card-header">
                <h1>一个简单的Qt计算器授权演示</h1>
              </div>
            </template>
            <div v-if="loading" class="loading-text">加载中...</div>
            <MarkdownWithHighlight v-else :source="demoContent" />
          </el-card>
        </el-main>
      </el-tab-pane>

      <el-tab-pane label="附件下载" name="download">
        <el-main>
          <el-card id="downloader" class="card-item">
            <template #header>
              <div class="card-header">
                <h1>附件下载</h1>
              </div>
            </template>
            <h2>C++ SDK</h2>
            <span>适用于 Windows MSVC AMD64 的预编译库文件</span>
            <div>
              <el-button icon="el-icon-download" class="pan-btn tiffany-btn" style="margin: 20px;"
                @click="downloadFile('http://update.yamero.cc/liblicense-msvc-amd64.zip')">
                下载库文件
              </el-button>
            </div>
            <h2>Java SDK</h2>
            <span>制作中..</span>
            <h2>Python SDK</h2>
            <span>制作中..</span>
          </el-card>
        </el-main>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ColoredCard from '@/components/ColoredCard/index.vue'; // 导入 ColoredCard 组件
import MarkdownWithHighlight from '@/components/MarkdownWithHighlight.vue'; // 修正 Markdown 组件的导入

export default {
  name: 'DeveloperHelp',
  components: {
    MarkdownWithHighlight,
    ColoredCard
  },
  async mounted() {
    // 加载 Markdown 文档内容
    await this.loadMarkdownContent();
  },
  data() {
    return {
      activeTab: 'category', // 默认激活的帮助分类标签
      encryptionContent: '',
      cppContent: '',
      demoContent: '',
      loading: true // 添加加载状态
    };
  },
  methods: {
    // 加载 Markdown 文档内容
    async loadMarkdownContent() {
      this.loading = true;
      try {
        this.encryptionContent = await this.fetchMarkdown('/docs/encryption.md');
        this.cppContent = await this.fetchMarkdown('/docs/cpp.md')
        this.demoContent = await this.fetchMarkdown('/docs/demo.md')
      } catch (error) {
        console.error('加载 Markdown 文档失败:', error.message);
        this.encryptionContent = '无法加载帮助内容，请检查网络连接或稍后再试。';
      } finally {
        this.loading = false;
      }
    },
    async fetchMarkdown(url) {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! 状态码: ${response.status} (${response.statusText})`);
        }
        return await response.text();
      } catch (error) {
        throw new Error(`获取 Markdown 文档失败: ${error.message}`);
      }
    },
    downloadFile(filename) {
      const link = document.createElement('a')
      link.href = filename // 假设文件存放在 public/files 目录下
      link.download = filename
      link.click()
    }
  }
};
</script>

<style scoped>
.developer-help {
  padding: 20px;
}

.card-wrapper {
  margin-bottom: 20px;
  width: 60%;
  /* 调整为 margin 以优化布局 */
}

.card-item {
  margin-bottom: 20px;
  border-radius: 8px;
  padding-left: 25px;
  padding-right: 25px;
  width: 75%;
  margin-left: 10%;
  /* 向右偏移 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}


.card-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.loading-text {
  text-align: center;
  font-size: 14px;
  color: #666;
}
</style>
